<template>
	<div>
		<div class="right-top">
			<el-page-header @back="$router.go(-1)" content="资源管理">
			</el-page-header>
		</div>
		<div class="con" > 
		<el-row style="margin-bottom: 20px;"> 
			<div class="add-mian" >
				 <el-button type="primary" @click="add">添加</el-button>
			</div>
		</el-row>
			<el-table :data="tableData" height="550" stripe style="width: 100%" :header-cell-style="{'text-align':'center'}"
					:cell-style="{'text-align':'center'}" border>
					<el-table-column  type="index"  label="次序" ></el-table-column>
					<el-table-column  prop="name" label="主图名称" ></el-table-column>
					<el-table-column  prop="imageurl" label="主图" >
						<template slot-scope="scope" >
							
							<el-image
							v-if="scope.row.imageurl"
							class="avatar"
							   style="width: 200;height: 100px;"
							   :src="imgurl+scope.row.imageurl" 
							   :preview-src-list="[imgurl+scope.row.imageurl]">
							 </el-image>
						</template>
					</el-table-column>
					<el-table-column  prop="introduce" label="主图介绍"></el-table-column>
				
				<el-table-column label="操作" width="400">
					<template slot-scope="scope" >
						<el-button type="warning" @click="bianji(scope.row)">编辑</el-button>
						<el-button type="danger" @click="dela(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="block" style="margin-top: 18px;">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page"
					:page-sizes="[10]"
					:page-size="10"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</div>
		</div>
		<div>
			<el-dialog :title="form.id?'修改':'添加'" :visible.sync="dialogVisible" width="60%" height="80%" :before-close="close" :lock-scroll="true">
				<span>
					<el-form ref="form"  :model="form"  label-width="100px"  :inline="false">
						<el-row style="padding-bottom:20px ;">
							<el-col :span="6" v-if="node.least_num>=1">
								<el-form-item label="主图"  :required="true">
									<el-upload class="avatar-uploader" style="position: relative;" :action="url+'back/common/upload' " :show-file-list="false"
									:disabled ="form.imageurl?true:false"
										:headers="headers" :on-success="handleAvatarSuccess">
									
										<el-image
										class="avatar"
										v-if="form.imageurl"
										   style="width: 100%;height: 175px;"
										   :src="imgurl+form.imageurl" 
										   :preview-src-list="[imgurl+form.imageurl]">
										 </el-image>
										 <el-button type="danger" icon="el-icon-close" circle style="position: absolute;right:0px;top: 0;" size="mini" v-if="form.imageurl" @click="clearimg()"></el-button>
										 <span v-else class=" avatar-uploader-icon">
												<div>
													建议上传尺寸
																								
													<div>
														 {{node.size_limit_text }}
													</div>
												</div>
										 </span>
										<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
									</el-upload>
								</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item  label="主图名称" required    >
										 <el-input   v-model="form.name" placeholder="请输入主图名称"   style="width: 175px;"></el-input>
									</el-form-item>
									<el-form-item  label="文本介绍" required    >
										 <el-input   v-model="form.introduce" placeholder="请输入内容"  :rows="5" type="textarea" style="width: 175px;"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12" v-if="node.is_video">
									<el-form-item label="视频"  >
										 <el-upload :action="url+'back/common/upload'" :headers="headers" class="avatar-uploader" style="width:400px;height:178px;"
													:show-file-list="false"  accept="video/*"
													:disabled ="form.videourl?true:false"
													:on-success="handlelegalPersonVideoSuccess">
											   <video
												 v-if="form.videourl"
												 :src="imgurl+form.videourl"
												 class="video-avatar"
												 :autoplay="false"
												 controls="controls"
												 muted
												 loop
											   ></video>
											    <el-button type="danger" icon="el-icon-close" circle style="position: absolute;right:0px;top: 0;" size="mini" v-if="form.videourl" @click="clearvideo()"></el-button>
											<span v-else class=" avatar-uploader-icon" style="width: 400px;">建议上传视频不超过120秒</span>
										
										 </el-upload>
									   </el-form-item>
								</el-col>
								
							
							</el-row>
							<el-row v-if="node.is_details">
								<div style="margin-bottom: 20px; padding: 20px;width: 100%;height: 30px;background-color: #e2e2e2;box-sizing: border-box;display: flex;align-items: center;color: #fff;justify-content: space-between;">
									<div style="font-size: 14px;color: black;">
										详情
									</div>
									<div >
										<el-button type="primary" round icon="el-icon-plus" size="mini" @click="addxiangqing"></el-button>
										
									</div>
								</div>
							<div style="height:400px;overflow-y: scroll;">
								
							
								<el-col v-for="(itema,index) in form.detail" :key="index">
							
									<el-col :span="4" style="position: relative;">
									  <el-button type="success"  circle style="position: absolute;left:2px;top: 50%;transform: translateY(-50%);" size="mini"> {{index+1}}</el-button>
									  <el-button type="danger" icon="el-icon-delete" circle style="position: absolute;left:50px;top: 65%;" size="mini" v-if="index!=0" @click="clearxiangqing(index)"></el-button>
										<el-form-item label="详情图"  :required="true">
											<el-upload class="avatar-uploader-xiang" :action="url+'back/common/upload' " :show-file-list="false"
											:disabled ="itema.imageurl?true:false"
												:headers="headers" :on-success="handleAvatarSuccessx.bind( this,index)">
												<el-image
												class="avatar-xiang"
												v-if="itema.imageurl"
												   style="width:120px;height: 120px;"
												   :src="imgurl+itema.imageurl" 
												   :preview-src-list="[imgurl+itema.imageurl]">
												 </el-image>
												   <el-button type="danger" icon="el-icon-close" circle style="position: absolute;right:0px;top: 0;" size="mini" v-if="itema.imageurl" @click="cleardandu(index,'img')"></el-button>
												 <span v-else class=" avatar-uploader-icon-xiang">
														<div>
															建议上传尺寸
																										
															<div>
																 {{node.width}}*{{node.height}}
															</div>
														</div>
												 </span>
												<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
											</el-upload>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item label="视频"  >
											 <el-upload :action="url+'back/common/upload'" :headers="headers" class="avatar-uploader" style="width:260px;height:120px;"
														:show-file-list="false"  accept="video/*"
														:disabled ="itema.videourl?true:false"
														:on-success="handlelegalPersonVideoSuccessx.bind( this,index)">
												   <video
													 v-if="itema.videourl"
													 :src="imgurl+itema.videourl"
													 class="video-avatar-xiangqing"
													 :autoplay="false"
													 controls="controls"
													 muted
													 loop
												   ></video>
												     <el-button type="danger" icon="el-icon-close" circle style="position: absolute;right:0px;top: 0;" size="mini" v-if="itema.videourl" @click="cleardandu(index,'vid')"></el-button>
												<span v-else class=" avatar-uploader-icon" style="width: 260px;height: 120px;">建议上传视频不超过120秒</span>
											
											 </el-upload>
										   </el-form-item>
									</el-col>
									<el-col :span="12">
										<el-col :span="11">
										<el-form-item  label="详情标题" >
											 <el-input   v-model="itema.title" placeholder="请输入主图"   style="width: 175px;"></el-input>
										</el-form-item>
										<el-form-item  label="详情介绍"   >
											 <el-input   v-model="itema.introduce" placeholder="请输入详情介绍"  :rows="2" type="textarea" style="width: 175px;"></el-input>
										</el-form-item>
											</el-col>
										<el-col :span="11">
											<el-form-item  label="详情名称" >
												 <el-input   v-model="itema.name" placeholder="请输入详情图名称"   style="width: 175px;"></el-input>
											</el-form-item>
											<el-form-item  label="详情内容"  >
												 <el-input   v-model="itema.content" placeholder="请输入详情内容"  :rows="2" type="textarea" style="width: 175px;"></el-input>
											</el-form-item>
										</el-col>
									
									</el-col>
									<el-col :span="24" style="height: 10px;background-color: #e2e2e2;margin-bottom: 10px;">
										
									</el-col>
								</el-col>
								</div>
							</el-row>
					
								
							
						
					</el-form>
				</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="close">取 消</el-button>
					<el-button type="primary" @click="submit()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
		import setting from '@/config/setting';
	export default{
		data(){
			return {
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				node:{},
				page:1,
				size:10,
				tableData:[],
				total:0,
				form:{
					template_id:'',
					imageurl:'',
					introduce:'',
					name:'',
					videourl:'',
					detail:[
						{name:'',imageurl:'',introduce:'',title:'',content:'',videourl:''}
					]
				},
				dialogVisible :false
			}
		},
		mounted(){
		
		},
		created() {
		  this.getParams()
		},
		methods:{
			getParams () {
			  // 取到路由带过来的参数
			  let routerParams = this.$route.query.obj;
			  // 将数据放在当前组件的数据内
			  this.node = routerParams;
			  console.log("this.nodeData:",this.node);
			  this.getlist()
			},
			getlist(){
		
				this.$http.get(`/back/resource/list?size=${this.size}&page=${this.page}&template_id=${this.node.id}`).then(res => {
					this.tableData = res.data.data.data
					this.page = res.data.data.current_page
					this.total = res.data.data.total
				})
			
			},
			dela(row){
				let that =this
				this.$http.post(`/back/resource/del`,{
					id:row.id
				}).then(res => {
					console.log(res)
					if(res.data.code==1){
						this.$message.success(res.data.msg);
						this.page=1
						this.getlist()
					}else{
						this.$message.error(res.data.msg);
					}
				})
			},
			bianji(row){
				this.form=row
				this.dialogVisible = true
			},
			add(){
				this.form={
					template_id:this.node.id,
					imageurl:'',
					introduce:'',
					name:'',
					videourl:'',
					detail:[
						{name:'',imageurl:'',introduce:'',title:'',content:'',videourl:''}
					]
				}
				this.dialogVisible = true
			},
			addxiangqing(){
				this.form.detail.push( {name:'',imageurl:'',introduce:'',title:'',content:'',videourl:''} )
			},
			handleAvatarSuccessx(index,res) {
				// console.log(res)
				// console.log(index)
				if(res.code == 0){
					this.$message.error(res.msg);
				}else{
					this.$message.success(res.msg);
						this.$set(this.form.detail[index], 'imageurl', res.code.url)
				}
			},
			handleAvatarSuccess(res) {
				if(res.code == 0){
					this.$message.error(res.msg);
				}else{
					this.$message.success(res.msg);
						this.$set(this.form, 'imageurl', res.code.url)
				}
			},
			handlelegalPersonVideoSuccess(res) {
				 if(res.code == 0){
				 	this.$message.error(res.msg);
				 }
				 this.$message.success(res.msg);
					this.$set(this.form,'videourl',res.code.url)	
			},
			handlelegalPersonVideoSuccessx(index,res) {
				 if(res.code == 0){
				 	this.$message.error(res.msg);
				 }
				 this.$message.success(res.msg);
					this.$set(this.form.detail[index],'videourl',res.code.url)	
			},
			
			clearxiangqing(index){
				let that =this
				this.$http.post(`/back/resource/detaildel`,{
					imageurl:that.form.detail[index].imageurl,
					videourl:that.form.detail[index].videourl
				}).then(res => {
					console.log(res)
					if(res.data.code==1){
						this.$message.success(res.data.msg);
						this.form.detail.splice(index,1);
					}else{
						this.$message.error(res.data.msg);
					}
				})
				
				
			},
			clearimg(){
				this.$http.post(`/back/resource/danurldel`,{
					url:this.form.imageurl,
				}).then(res => {
					console.log(res)
					if(res.data.code==1){
						this.$message.success(res.data.msg);
						this.form.imageurl=''
					}else{
						this.$message.error(res.data.msg);
					}
				})
			},
			clearvideo(){
				this.$http.post(`/back/resource/danurldel`,{
					url:this.form.videourl,
				}).then(res => {
					console.log(res)
					if(res.data.code==1){
						this.$message.success(res.data.msg);
						this.form.videourl=''
					}else{
						this.$message.error(res.data.msg);
					}
				})
			},
			cleardandu(index,type){
				if(type=="img"){
					this.$http.post(`/back/resource/danurldel`,{
						url:this.form.detail[index].imageurl,
					}).then(res => {
						console.log(res)
						if(res.data.code==1){
							this.$message.success(res.data.msg);
							this.form.detail[index].imageurl=''
						}else{
							this.$message.error(res.data.msg);
						}
					})
				}else{
					this.$http.post(`/back/resource/danurldel`,{
						url:this.form.detail[index].videourl,
					}).then(res => {
						console.log(res)
						if(res.data.code==1){
							this.$message.success(res.data.msg);
							this.form.detail[index].videourl=''
						}else{
							this.$message.error(res.data.msg);
						}
					})
				}
				
			},
			close(){
				let that =this
				if(that.form.id){
				
					this.dialogVisible = false
				}else{
					let arr=[]
					for(let item of that.form.detail){
						arr.push({
							imageurl:item.imageurl,
							videourl:item.videourl
						})
					}
								
					this.$http.post(`/back/resource/resourcedel`,{
						imageurl:that.form.imageurl,
						videourl:that.form.videourl,
						detail:arr
					}).then(res => {
						console.log(res)
						if(res.data.code==1){
							this.$message.success(res.data.msg);
							this.dialogVisible = false
						}else{
							this.$message.error(res.data.msg);
						}
					})
				}
				
				
				// this.getlist()
				
			},
			
			submit(){
				console.log(this.form)
				this.$http.post(`/back/resource/edit`,this.form
					
				).then(res => {
					console.log(res)
					if(res.data.code==1){
						this.$message.success(res.data.msg);
						this.dialogVisible = false
						this.page=1
						this.getlist();
					}else{
						this.$message.error(res.data.msg);
					}
				})
			},
			handleSizeChange(val) {
			    console.log(`每页 ${val} 条`);
			},
			 
			handleCurrentChange(val) {
			    console.log(`当前页: ${val}`);
				this.page=val;
				this.getlist();
			},
			// goBack(){
			// 	this.$router.go(-1)
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-uploader-xiang  {
		width: 120px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader-xiang:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon-xiang {
		font-size: 20px;
		color: #8c939d;
		width: 120px;
		height: 120px;
	
		font-size: 14px;
		text-align: center;
		display: inline-block;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.video-avatar-xiangqing{
		width: 260px;
		height:120px;
		display: block;
		// left:30px;
	}
	.video-avatar{
		width: 400px;
		height:178px;
		display: block;
		// left:30px;
	}
	.avatar-uploader  {
		width: 178px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 20px;
		color: #8c939d;
		width: 178px;
		height: 178px;
	
		font-size: 14px;
		text-align: center;
		display: inline-block;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.right-top{
		width:100%;
		background-color: #fff;
		font-weight: 600;
		font-size: 16px;
		padding: 16px 24px;
	}
	.con{
		width: 100%;
		padding: 20px;
		margin-top: 20px;
		border-radius: 10px;
		box-sizing: border-box;
		background-color: #fff;
	}
</style>